<template>
  <div>
    <img
      src="http://gis.x-zd.net/open-map/assets/vector.5cb7d6a8.png"
      @click="toggleMap1"
    />
    <img
      src="http://gis.x-zd.net/open-map/assets/image.73771b41.png"
      @click="toggleMap2"
    />
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

//这样直接拷贝出来就可以设用set属性吗?

let gaode, image, value1, value2;

const toggleMap1 = () => {
  if (value1) {
    gaode.setVisible(1);
  } else {
    value1 = true;
  }
};
const toggleMap2 = () => {
  if (value2) {
    gaode.setVisible(0);
  } else {
    value2 = true;
  }
};
onMounted(() => {
  //   console.log(proxy.$map);
  const map = proxy.$map;
  gaode = map
    .getLayers()
    .getArray()
    .find((layer) => layer.get("title") === "gaode");
  value1 = gaode.get("visible");
  image = map
    .getLayers()
    .getArray()
    .find((layer) => layer.get("title") === "image");
  value2 = gaode.get("visible");
});
</script>

<style scoped>
div {
  position: fixed;
  bottom: 20px;
  z-index: 1000;
  right: 20px;
}
img {
  width: 100px;
  height: 100px;
  border: 1px solid #333;
  padding: 5px;
  margin: 5px;
  border-radius: 15px;
}
</style>
